<template>
    <div class="time" :id="id">
        <span :style="{letterSpacing: element.style.letterSpacing + 'px'}">{{ date }}</span>
    </div>
</template>

<script>
import Dayjs from 'dayjs';
import register from '@/js/main/register.js';
export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        }
    },
    data() {
        return {
            date: '',
            timer: null
        };
    },
    methods: {
        getTime() {
            let format = this.element.data.format;
            if (!format) {
                format = 'YYYY-MM-DD HH:mm:ss';
            }
            this.date = Dayjs().format(format);
        }
    },
    mounted() {
        register.addComponent(this);
        this.getTime();
        this.timer = setInterval(() => {
            this.getTime();
        }, 1000);
    },
    beforeDestroy() {
        clearInterval(this.timer);
        register.removeComponent(this);
    },
    created() {
        register.addComponent(this);
    },
    destroyed() {
        register.removeComponent(this);
    }
};
</script>
<style lang="scss" scoped>
.time {
    text-align: center !important;
}
</style>